<template>
  <!-- <div class="search-container">
    <el-form ref="searchFormRef" :inline="true" :model="searchData">
      <el-row>
        <el-col>
          <el-form-item
            v-for="(item, index) in config.searchConfig"
            :label="item.label"
            :prop="item.prop"
            :key="index"
          >
            <el-input
              v-if="item.type === 'input'"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder || `请输入${item.label}`"
              clearable
            ></el-input>
            <el-select
              v-if="item.type == 'select'"
              v-model="searchData[item.prop]"
              :multiple="item.multiple || false"
              :placeholder="item.placeholder || `请选择${item.label}`"
              clearable
            >
              <el-option
                v-for="(item2, index2) in item.selectOptions"
                :key="index2"
                :label="item2.text"
                :value="item2.value"
              ></el-option>
            </el-select>
            <el-date-picker
              v-if="item.type == 'datePicker'"
              v-model="searchData[item.prop]"
              type="date"
              :placeholder="item.placeholder || `请选择${item.label}`"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset(searchFormRef)">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div> -->
  <!-- <div class="button-container">
    <slot name="buttonTool"></slot>
  </div> -->
  <div class="table-container">
    <el-table
      ref="table"
      :data="tableData"
      v-loading="loading"
      :row-class-name="tableRowClassName"
      row-key="id"
      default-expand-all
      @selection-change="handleSelectionChange"
    >
      <!-- checkbox列 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="56"
        align="center"
        fixed="left"
      ></el-table-column>
      <!-- 序号列 -->
      <el-table-column
        v-if="index"
        type="index"
        width="80"
        label="序号"
        align="center"
      ></el-table-column>
      <!-- columnData属性列 -->
      <template v-for="item in config.column" :key="item.id">
        <el-table-column
          v-if="item.type === 'option'"
          label="操作"
          fixed="right"
        >
          <template #default="scope">
            <HRButton
              v-for="(btnItem, btnIndex) in item.buttonConfig"
              :key="btnItem.id"
              :type="btnItem.type"
              :icon="btnItem.icon"
              :title="btnItem.label"
              @click="handleClick(btnItem.id, scope)"
              :style="`${
                btnIndex < item.buttonConfig.length - 1
                  ? `border-right:2px solid ${
                      btnTypeColor[btnItem.type || 'primary']
                    };`
                  : ''
              } ${btnIndex == 0 ? 'padding-left:0px;' : 'padding-left:10px;'}`"
            ></HRButton>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'tag'"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :formatter="item.formatter"
        >
          <template #default="scope">
            <el-tag>{{ scope.row[item.prop] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'link'"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :formatter="item.formatter"
        >
          <template #default="scope">
            <el-link type="primary" @click="linkOnClick(scope.row)">{{
              scope.row[item.prop]
            }}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :formatter="item.formatter"
        >
        </el-table-column>
      </template>
    </el-table>
    <!-- <el-config-provider :locale="zhCn">
      <el-pagination
        style="margin-top: 10px"
        background
        layout="->,total, prev, pager,
  next, sizes, jumper"
        :total="total"
        :currentPage="currentPage"
        :page-size="pageSize"
        @size-change="sizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import HRButton from "@/components/HRButton";
// ElConfigProvider 组件
import { ElConfigProvider } from "element-plus";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
defineProps({
  //是否显示loading
  loading: {
    type: Boolean,
    default: false,
  },
  //表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  //表格配置项
  config: {
    type: Object,
    default: () => {},
  },
  //是否显示斑马纹
  stripe: {
    type: Boolean,
    default: false,
  },
  //是否显示CheckBox
  selection: {
    type: Boolean,
    default: false,
  },
  //是否显示序号
  index: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 40,
  },
});

//子组件回调函数
const emit = defineEmits([
  "optionOclick",
  "sizeChange",
  "handleCurrentChange",
  "linkOnClick",
]);

const btnTypeColor = ref({
  primary: "#00B9FF",
  danger: "#FE545B",
});
//搜索栏form data
const searchData = ref({});
//搜索栏form ref
const searchFormRef = ref();
//table 分页器 当前页码
const currentPage = ref(1);
//table 分页器 一页数据量
const pageSize = ref(10);
//选择checkbox的回调方法
function handleSelectionChange() {}

//操作项内 按钮点击事件
function handleClick(btnID, scope) {
  emit("optionOclick", btnID, scope.row);
}

//监听table-分页器-一页数据量发生变化的方法
const sizeChange = (value) => {
  pageSize.value = value;
  emit("sizeChange", value);
};
//监听 table-分页器-页码变化的方法
const handleCurrentChange = (value) => {
  currentPage.value = value;
  emit("handleCurrentChange", value);
};
//单元格中link类型点击事件
const linkOnClick = (data) => {
  emit("linkOnClick", data);
};
//搜索栏重置按钮点击事件
const onReset = (searchFormRef) => {
  if (searchFormRef) {
    console.log(searchFormRef);
    currentPage.value = 1;
    pageSize.value = 10;
    searchFormRef.resetFields();
  }
};

//搜索栏搜索按钮点击事件
const onSubmit = () => {
  console.log(searchData.value);
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "warning-row";
  } else if (rowIndex % 2 === 1) {
    return "success-row";
  }
  return "";
};
</script>
<style scoped lang="scss">
.search-container {
  padding: 10px 10px 0px 10px;
}

.table-container {
  padding: 0px 22px 22px 22px;
}

.el-table .warning-row {
  background: #161b27 !important;
  border: 1px solid #2e3f4c;
}
.el-table .success-row {
  background: #192530 !important;
  border: 1px solid #2e3f4c;
}

.el-table-fixed-column--right {
  background: transparent !important;
}
</style>
